<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI Digital Human with MediaElement.js</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.16/mediaelementplayer.min.css" />
    <style>
        body {
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background: #f0f0f0;
        }

        .digital-human {
            position: relative;
            width: 90vw; /* 使用相对宽度以适应各种设备 */
            max-width: 360px; /* 最大宽度，防止过大 */
            height: 60vh; /* 高度相对视口的高度 */
            max-height: 640px; /* 最大高度，防止过大 */
            background: transparent; /* 保持透明背景 */
            transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
        }

        .mejs-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: transparent; /* 设置视频容器背景透明 */
        }

        video {
            width: 100%;
            height: 100%;
            background: transparent; /* 设置视频背景透明 */
            display: block; /* 移除任何额外的内边距 */
        }

        .mute-button {
            position: absolute;
            top: 47%;
            left: 38%;
            transform: translate(-50%, -50%);
            width: 50px;
            height: 50px;
            background-image: url('https://sjzz.ilhjy.cn/uimg/202405/14/1715651036930_3480.png');
            background-size: cover;
            background-position: center;
            cursor: pointer;
            animation: pulse 2s infinite; /* 添加脉冲动画 */
        }

        @keyframes pulse {
            0% { transform: translate(-50%, -50%) scale(1); }
            50% { transform: translate(-50%, -50%) scale(1.2); }
            100% { transform: translate(-50%, -50%) scale(1); }
        }
    </style>
</head>
<body>
<div class="digital-human">
    <video id="my-video" class="mejs" autoplay muted preload="auto" playsinline>
        <source src="assets/video/1717658488515_3480.webm" type="video/webm"/>
        Your browser does not support the video tag.
    </video>
    <div id="mute-btn" class="mute-button"></div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/mediaelement/4.2.16/mediaelement-and-player.min.js"></script>
<script>
    // 初始化 MediaElement.js
    const player = new MediaElementPlayer('my-video', {
        features: [], // 去掉控制栏
        success: function(mediaElement, originalNode) {
            mediaElement.setMuted(true); // 默认静音
        },
        error: function() {
            console.log('Error initializing MediaElement.js');
        }
    });

    const muteBtn = document.getElementById('mute-btn');

    // 切换静音和播放声音
    muteBtn.addEventListener('click', () => {
        if (player.media.muted) {
            player.setMuted(false); // 取消静音
            muteBtn.style.display = 'none'; // 点击后隐藏div
        } else {
            player.setMuted(true); // 静音
        }
    });

    // 监听音量变化来更新按钮状态
    player.media.addEventListener('volumechange', () => {
        if (player.media.muted) {
            muteBtn.style.display = 'block'; // 显示静音按钮
        } else {
            muteBtn.style.display = 'none'; // 隐藏静音按钮
        }
    });

    // 在这里可以添加更多自定义逻辑，如AI数字人的互动
</script>
</body>
</html>
